﻿<template>
    <div id="app" style="background-color:#ffffff">


        <Row style="padding:40px;">


            <Row style="height:100px;margin-top:30%;">
                <p style="text-align:center"><img :src="headimgurl" style="width:100px" /></p>
            </Row>
            <Row style="margin-top:40px;">
                <p style="text-align:center">{{nickname}}</p>
            </Row>

            <Row style="margin-top:10px;border-bottom:1px solid #ccc">
                <Col span="24">
                <a style="float:left"><img src="../assets/images/icon_phone.png" style="width:35px;" /></a>
                <a style="float:left;line-height:40px;vertical-align:middle;font-size:16px;color:#ccc">+86</a>
                <a style="float:left;width:1px;height:30px;background-color:black;margin-left:5px;margin-right:2px;vertical-align:middle;margin-top:10px;margin-bottom:10px;">&nbsp;</a>
                <input type="tel" v-model="phone" style="border:0px;float:left;width:70%;font-size:16px;color:black;margin-bottom:0px;" placeholder="填写手机号" />
                </Col>
            </Row>

            <Row style="margin-top:15px;border-bottom:1px solid #ccc;clear:both">

                <Col span="4">
                <img src="../assets/images/icon_code.png" style="width:35px;" />

                </Col>

                <Col span="10">

                <input type="number" placeholder="手机验证码" v-model="code" style="width:100%;float:left;height:40px;border:0px;font-size:16px;padding-left:3px;" />
                </Col>

                <Col span="10" style="padding-left:10px;">

                <Button style="background-color:#feefef;width:100px;height:35px;color:#f13e4b;margin-bottom:2px;border-radius:15px;border:0px;" @click="getcode">{{codename}}</Button>
                </Col>


            </Row>
            <Row style="margin-top:10px;">
                <p  style="color:#9a9a9a;font-size:12px;">
                <input type="checkbox" v-model="tiaokuan" @click="CheckItem" style="height:30px;vertical-align:middle;" /> &nbsp;我已阅读并接受<a style="color:red">《服务条款》</a>与<a style="color:red">《隐私保护条款》</a>
                </p>
            </Row>
            <Row>
                <Col span="24" style="text-align:center">
                <Button style="width:100%;background-color:#f89225;color:#ffffff;border-radius:15px;height:40px;margin-top:20px;" @click="login">提交</Button>
                </Col>

            </Row>


        </Row>
        <router-view></router-view>
    </div>
</template>

<script>
    import header from '../components/header.vue';
    import { Toast } from 'mint-ui';
import { setTimeout } from 'timers';

    export default {
        name: 'app',
        data() {
            return {
                title: "绑定手机号",
                code: "",
                phone: "",
                phonedefault: "+86",
                nickname: "",
                headimgurl: "",
                codename: "获取验证码",
                disabled: true,
                tiaokuan: false
            }
        },
        components: {
            'h-header': header,
        },

        methods: {

            CheckItem: function () {
                setTimeout(function () {
                    if (this.$data.tiaokuan) {
                        this.$data.tiaokuan = false;
                    } else {
                        this.$data.tiaokuan = true;
                    }

                }, 1000);
             

            },
            getcode: function () {

                var _this = this;


                var phone = this.$data.phone;
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    Toast("手机号有误");
                    _this.$data.disabled = true;
                } else if (_this.$data.disabled) {
                    _this.$data.disabled = false;

                    this.$api.post('wx/Index/getcode', {
                        "phone": phone
                    }, response => {
                        console.log(response.status);
                        if (response.status >= 200 && response.status < 300) {
                            var data = response.data;
                            if (data.status == 200) {
                                var num = 61;


                                var timer = setInterval(function () {
                                    num--;
                                    if (num <= 0) {
                                        clearInterval(timer);
                                        _this.$data.codename = "重新发送";
                                        _this.$data.disabled = true;

                                    } else {
                                        _this.$data.codename = num + "s"
                                        _this.$data.disabled = false;
                                    }
                                }, 1000)




                            } else {
                                Toast(data.message);
                            }

                        } else {
                            Toast("请求失败");
                            console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });

                }


            },
            load: function () {
                // this.$router.push({ name: 'choose', params: {} });

                this.$data.nickname = window.localStorage.getItem('nickname');
                this.$data.headimgurl = window.localStorage.getItem('headimgurl');

            },
            login: function () {
                var phone = this.$data.phone;
                var code = this.$data.code;


                if (phone == "") {
                    Toast("请填写手机号");
                } else if (code == "") {
                    Toast("请填写手机验证码");
                } else if (this.$data.tiaokuan == false) {
                    Toast("请点击我已阅读协议");
                } else {
                    var openid = window.localStorage.getItem('openid');
                    var nickname = window.localStorage.getItem('nickname');
                    var headimgurl = window.localStorage.getItem('headimgurl');

                    var _this = this;
                    this.$api.post('wx/Index/phonelogin', {
                        "phone": phone,
                        "code": code,
                        "openid": openid,
                        "nickname": nickname,
                        "headimgurl": headimgurl
                    }, response => {
                        console.log(response.status);
                        if (response.status >= 200 && response.status < 300) {
                            var data = response.data;
                            if (data.status == 200) {
                                Toast(data.message);
                                _this.$router.push({ name: 'choose', params: {} });

                            } else {
                                Toast(data.message);
                            }
                            //this.$data.code = response.data;

                            //请求成功，response为成功信息参数
                        } else {
                            Toast("请求失败1");
                            console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });

                }



            }

        }, created() {
            this.load();

        }

    }
</script>

<style scoped>
    #app {
        background-image: url("../assets/images/register_bg.png");
        background-repeat: no-repeat;
        background-size: contain;
    }
</style>